<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>融昌建材全产业链工作台</title>
    <link rel="icon" href="images/icon.png">
    <link rel="stylesheet" type="text/css" href="css/header.css" />
    <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="css/layuimini.css?v=2.0.4.2" media="all">
    <link rel="stylesheet" href="css/themes/default.css" media="all">
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            position: relative;
            top: 270px;
            left: 40px;
            width: 1535px;
            height: 700px;
        }

        .dropbtn:hover {
            color: black;
        }

        .footer {
            position: relative;
            top: 250px;
            left: 40px;
        }

        .onsale {
            width: 100%;
            margin-top: 10px;
            height: 650px;
        }

        .offsale {
            width: 100%;
            margin-top: 10px;
            height: 650px;
        }

        li {
            display: inline-block;
            vertical-align: middle;
            height: 300px;
            width: 250px;
            border: 1px solid #ccc;
            margin: 0 20px 20px 0;
        }

        li:hover {
            cursor: pointer;
        }

        .good-img {
            width: 160px;
            margin: 15px 0 10px 15px;
        }

        .price {
            font-size: 20px;
            margin-left: 15px;
        }

        .mname,
        .mtype {
            margin: 5px 0 5px 15px;
        }

        .mname {
            font-size: 16px;
        }

        .offsale .mname {
            color: grey;
        }

        .shop-icon {
            width: 18px;
            margin: 0 5px 0 15px;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="headerTips">
            <div class="headerTipsL">
                <div class="beforeLogin">
                    <a href="login.html" id="login">请登录</a>
                    <a href="register.html" id="register">免费注册</a>
                </div>
                <div class="afterLogin">
                    <a style="color: black;" id="username">赵先生</a>
                    <img src="images/邮箱.png" alt="" style="cursor: pointer;">
                    <span id="exit"
                        style="cursor: pointer;color:rgb(75, 145, 225);font-size: 14px;margin-left: 20px;">退出</span>
                </div>
            </div>
            <div class="headerTipsR">
                <ul>
                    <div class="dropdown" id="dropdown1">
                        <a href="page/gdzx.html" class="dropbtn">工地中心<img src="images/down.png" alt=""></a>
                        <div class="dropdown-content" id="dropdown-content1">
                            <a href="#">我的订单</a>
                            <a href="#">我的合同</a>
                            <a href="#">我的消息</a>
                        </div>
                    </div>
                    <div class="dropdown" id="dropdown2">
                        <a href="#" class="dropbtn">OEM中心<img src="images/down.png" alt=""></a>
                        <div class="dropdown-content" id="dropdown-content2">
                            <a href="#">入驻平台</a>
                            <a href="#">我的任务</a>
                            <a href="#">我的消息</a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <a href="#" class="dropbtn"><img src="images/bars.png" alt="">收藏中心</a>
                    </div>
                </ul>
            </div>
        </div>
        <div class="headerAdv">
            <a href=""><img src="images/首页/首页广告.png" style="width: 100%;" alt=""></a>
        </div>
        <div class="headerTitle">
            <div class="logo"><img src="images/logo.png" alt=""></div>
            <div class="title">
                <h1 style="font-weight: bold;">建材一站式服务平台</h1>
            </div>
            <div class="location">
                <p>郑州站</p>
                <a href="">【城市切换】</a>
            </div>
            <div class="search">
                <span class="search-text">全站搜索</span>
                <input type="text" name="" id="" value="请输入关键字查询相关资料">
                <span class="searchbtn" style="right: -6px;"><a href="#">搜索</a></span>
            </div>
        </div>
        <div class="headerbtn">
            <div class="dropdown" id="jcxg">
                <a href="#" class="dropbtn">建材选购<img src="images/down2.png" alt=""
                        style="width: 18px;margin-left: 5px;"></a>
                <div class="dropdown-content" style="height: 350px;">
                    <div class="xd" id="htxd">
                        <span class="xd-title">合同下单</span>
                        <div style="margin-left: 10px;">
                            <span href="" class="choice">旭辉运河悦章</span>
                            <span href="" class="choice">旭辉运河悦章</span>
                        </div>
                    </div>
                    <div class="xd" id="ptxd">
                        <span class="xd-title">普通下单</span>
                        <div class="nj">
                            <img src="images/分类.png" alt=""
                                style="width: 30px;margin-left: 10px;display:inline-block;vertical-align: middle;">
                            <span
                                style="color: rgb(75, 145, 225);height: 30px;line-height:30px;display:inline-block;vertical-align: middle;">砂浆</span>
                        </div>
                        <div style="margin-left: 10px;">
                            <span href="" class="choice">水泥泥浆</span>
                            <span href="" class="choice">混合砂浆</span>
                            <span href="" class="choice">特种砂浆</span>
                            <br>
                            <span href="" class="choice">其他砂浆</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="changePage">
                <span href="" id='page1' style="color: rgb(75, 145, 225);
                border-bottom: 5px solid rgb(75, 145, 225)">首页</span>
                <span href="" id="page2">全部商品</span>
                <span href="" id="page3">平台服务</span>
                <span href="" id="page4">骆驼快讯</span>
                <span href="" id="page5">推广有礼</span>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="nav">
            <a href="index.html">首页</a>
            <span>>></span>
            <a href="#">建材选购</a>
        </div>
        <div class="goods">
            <ul class="onsale">
                <li id='good9'>
                    <img src="https://pic.imgdb.cn/item/6201231b2ab3f51d91199750.jpg" alt="" class="good-img">
                    <p class="price" style="color: rgb(75, 145, 225);">¥1000.00/吨</p>
                    <p class="mname">油漆</p>
                    <p class="mtype" style="color: #ccc;font-size: 14px;">规格型号：DMP15</p>
                    <img src="images/shop.png" alt="" class="shop-icon">
                    <span style="color: #ccc;font-size: 14px;">河南融昌建材有限公司</span>
                </li>
                <li id='good2'>
                    <img src="https://pic.imgdb.cn/item/620123832ab3f51d9119f045.jpg" alt="" class="good-img">
                    <p class="price" style="color: rgb(75, 145, 225);">¥1000.00/吨</p>
                    <p class="mname">钢板</p>
                    <p class="mtype" style="color: #ccc;font-size: 14px;">规格型号：DMP15</p>
                    <img src="images/shop.png" alt="" class="shop-icon">
                    <span style="color: #ccc;font-size: 14px;">河南融昌建材有限公司</span>
                </li>
                <li id='good12'>
                    <img src="https://pic.imgdb.cn/item/6201234e2ab3f51d9119c226.jpg" alt="" class="good-img">
                    <p class="price" style="color: rgb(75, 145, 225);">¥1000.00/吨</p>
                    <p class="mname">实木</p>
                    <p class="mtype" style="color: #ccc;font-size: 14px;">规格型号：DMP15</p>
                    <img src="images/shop.png" alt="" class="shop-icon">
                    <span style="color: #ccc;font-size: 14px;">河南融昌建材有限公司</span>
                </li>
                <li id='good11'>
                    <img src="https://pic.imgdb.cn/item/6201215a2ab3f51d9117e01b.jpg" alt="" class="good-img">
                    <p class="price" style="color: rgb(75, 145, 225);">¥1000.00/吨</p>
                    <p class="mname">水泥</p>
                    <p class="mtype" style="color: #ccc;font-size: 14px;">规格型号：DMP15</p>
                    <img src="images/shop.png" alt="" class="shop-icon">
                    <span style="color: #ccc;font-size: 14px;">河南融昌建材有限公司</span>
                </li>
                <li id='good10'>
                    <img src="https://pic.imgdb.cn/item/620121902ab3f51d91180c7a.jpg" alt="" class="good-img">
                    <p class="price" style="color: rgb(75, 145, 225);">¥1000.00/吨</p>
                    <p class="mname">沙子</p>
                    <p class="mtype" style="color: #ccc;font-size: 14px;">规格型号：DMP15</p>
                    <img src="images/shop.png" alt="" class="shop-icon">
                    <span style="color: #ccc;font-size: 14px;">河南融昌建材有限公司</span>
                </li>
                <li id='good8'>
                    <img src="https://pic.imgdb.cn/item/620121c22ab3f51d911834c8.jpg" alt="" class="good-img">
                    <p class="price" style="color: rgb(75, 145, 225);">¥1000.00/吨</p>
                    <p class="mname">砖头</p>
                    <p class="mtype" style="color: #ccc;font-size: 14px;">规格型号：DMP15</p>
                    <img src="images/shop.png" alt="" class="shop-icon">
                    <span style="color: #ccc;font-size: 14px;">河南融昌建材有限公司</span>
                </li>
                <li id='good7'>
                    <img src="https://pic.imgdb.cn/item/620121f12ab3f51d91185e6e.jpg" alt="" class="good-img">
                    <p class="price" style="color: rgb(75, 145, 225);">¥1000.00/吨</p>
                    <p class="mname">钢筋</p>
                    <p class="mtype" style="color: #ccc;font-size: 14px;">规格型号：DMP15</p>
                    <img src="images/shop.png" alt="" class="shop-icon">
                    <span style="color: #ccc;font-size: 14px;">河南融昌建材有限公司</span>
                </li>
                <li id='good5'>
                    <img src="https://pic.imgdb.cn/item/620122082ab3f51d911875b3.jpg" alt="" class="good-img">
                    <p class="price" style="color: rgb(75, 145, 225);">¥1000.00/吨</p>
                    <p class="mname">木板</p>
                    <p class="mtype" style="color: #ccc;font-size: 14px;">规格型号：DMP15</p>
                    <img src="images/shop.png" alt="" class="shop-icon">
                    <span style="color: #ccc;font-size: 14px;">河南融昌建材有限公司</span>
                </li>
                <li id='good6'>
                    <img src="https://pic.imgdb.cn/item/620122292ab3f51d911892f1.jpg" alt="" class="good-img">
                    <p class="price" style="color: rgb(75, 145, 225);">¥1000.00/吨</p>
                    <p class="mname">石材</p>
                    <p class="mtype" style="color: #ccc;font-size: 14px;">规格型号：DMP15</p>
                    <img src="images/shop.png" alt="" class="shop-icon">
                    <span style="color: #ccc;font-size: 14px;">河南融昌建材有限公司</span>
                </li>
            </ul>
            <p id="offsale-text" style="display: none;font-weight: bold;color: #a0a0a0;font-size: 16px;margin: 10px 0;">
                以下产品不支持线上销售</p>
            <ul class="offsale" style="display: none;">
                <li id='good1'>
                    <img src="https://pic.imgdb.cn/item/6201256f2ab3f51d911b9638.jpg" alt="" class="good-img">
                    <p class="price" style="color: rgb(75, 145, 225);">¥1000.00/吨</p>
                    <p class="mname">脚手架</p>
                    <p class="mtype" style="color: #ccc;font-size: 14px;">规格型号：DMP15</p>
                    <img src="images/shop.png" alt="" class="shop-icon">
                    <span style="color: #ccc;font-size: 14px;">河南融昌建材有限公司</span>
                </li>
                <li id='good3'>
                    <img src="https://pic.imgdb.cn/item/620125a82ab3f51d911bc661.jpg" alt="" class="good-img">
                    <p class="price" style="color: rgb(75, 145, 225);">¥1000.00/吨</p>
                    <p class="mname">胶合板</p>
                    <p class="mtype" style="color: #ccc;font-size: 14px;">规格型号：DMP15</p>
                    <img src="images/shop.png" alt="" class="shop-icon">
                    <span style="color: #ccc;font-size: 14px;">河南融昌建材有限公司</span>
                </li>
                <li id='good4'>
                    <img src="https://pic.imgdb.cn/item/620125f72ab3f51d911c2708.jpg" alt="" class="good-img">
                    <p class="price" style="color: rgb(75, 145, 225);">¥1000.00/吨</p>
                    <p class="mname">原木</p>
                    <p class="mtype" style="color: #ccc;font-size: 14px;">规格型号：DMP15</p>
                    <img src="images/shop.png" alt="" class="shop-icon">
                    <span style="color: #ccc;font-size: 14px;">河南融昌建材有限公司</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer" id="page">
    </div>
    <script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="js/lay-config.js?v=2.0.0" charset="utf-8"></script>
    <script>
        function clearCookie() {
            let paths = ['/']
            let domain = []
            let host = location.hostname
            domain.push(host)
            if (host.indexOf('www') > -1) {
                domain.push(host.substr(3))
            }
            let keys = document.cookie.match(/[^ =;]+(?=\=)/g)

            function deleteCookie(name, path, domain) {
                let keys = document.cookie.match(/[^ =;]+(?=\=)/g) || []
                if (keys.indexOf(name) < 0) return
                document.cookie = name + '=' + ((path) ? ';path=' + path : '') + ((domain) ? ';domain=' + domain : '') +
                    ';expires=Thu,01-Jan-1970 00:00:01 GMT';
            }
            // 确保paths、domain、keys都不相同，都要进行清除
            paths.forEach(p => {
                domain.forEach(d => {
                    keys.forEach(k => {
                        deleteCookie(k, p, d)
                    })
                })
            })
        }
        layui.use(['jquery', 'layer', 'laypage'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                laypage = layui.laypage;
            var remember = 0; //是否记住密码
            var password = '';
            var username = '';
            var url = window.location.href;
            var contract = url.split('=')[1];
            laypage.render({
                elem: 'page',
                count: 12,
                theme: '#01AAED',
                layout: ['prev', 'page', 'next', 'count', 'skip'],
                jump: function (obj) {
                    if (obj.curr == 1) {
                        $('.onsale').css('display', 'block');
                        $('.offsale').css('display', 'none');
                        $('#offsale-text').css('display', 'none');
                    } else if (obj.curr == 2) {
                        $('.onsale').css('display', 'none');
                        $('.offsale').css('display', 'block');
                        $('#offsale-text').css('display', 'block');
                    }
                }
            });
            $('body').ready(function () {
                var strCookie = document.cookie;
                if (strCookie != '') {
                    var arrCookie = strCookie.split("; ");
                    for (i = 0; i < arrCookie.length; i++) {
                        var arr = arrCookie[i].split("=");
                        if (arr[0] == 'username')
                            username = arr[1];
                        else if (arr[0] == 'remember')
                            remember = 1;
                        else if (arr[0] == 'password')
                            password = arr[1];
                    }
                }
                if (username != '') {
                    $('.beforeLogin').css('display', 'none');
                    $('.afterLogin').css('display', 'block');
                    document.getElementById('username').innerText = username;
                } else {
                    $('.beforeLogin').css('display', 'block');
                    $('.afterLogin').css('display', 'none');
                }
            })

            $('#exit').on('click', function () {
                $('.beforeLogin').css('display', 'block');
                $('.afterLogin').css('display', 'none');
                clearCookie();
                if (remember)
                    document.cookie = "remember=1";
                if (password != '')
                    document.cookie = "password=" + password;
                if (username != '')
                    document.cookie = "username=" + username;
            })
            $('.search input').on('focus', function () {
                $(this).val('');
                $(this).css('color', 'black');
            })
            $('.search input').on('blur', function () {
                if ($(this).val() == '') {
                    $(this).val('请输入关键字查询相关资料');
                    $(this).css('color', '#ccc');
                } else {
                    $(this).css('color', 'black');
                }

            })
            $('.choice').on('click', function () {
                if ($(this).css('color') == 'rgb(156, 156, 156)') {
                    $(this).css('color', 'grey');
                    $(this).css('border', '1px solid grey');
                } else {
                    $(this).css('color', '#ccc');
                    $(this).css('border', '1px solid #ccc');
                }
            })
            $('.choice').on('mouseover', function () {
                if ($(this).css('color') != 'rgb(128, 128, 128)') {
                    $(this).css('color', 'rgb(156, 156, 156)');
                    $(this).css('border', '1px solid rgb(156, 156, 156)');
                }
            })
            $('.choice').on('mouseout', function () {
                if ($(this).css('color') != 'rgb(128, 128, 128)') {
                    $(this).css('color', '#ccc');
                    $(this).css('border', '1px solid #ccc');
                }
            })
            $('.changePage span').on('click', function () {
                for (i = 1; i < 6; i++) {
                    $('#page' + i).css('color', 'black');
                    $('#page' + i).css('border', 'none');
                }
                $(this).css('color', 'rgb(75, 145, 225)');
                $(this).css('border-bottom', '5px solid rgb(75, 145, 225)');
            })
            $('.onsale li').on('click', function () {
                var id = $(this).attr('id');
                var mid = id.substr(4, id.length);
                window.location = 'materialDetail.html?mid=' + mid + '&contract=' + contract;
            })
            $('.offsale li').on('click', function () {
                layer.msg("暂不支持线上销售！");
            })
        })
    </script>
</body>

</html>